<template lang="pug">
  .grid_box
    el-row(v-if="isCols" :gutter="-10")
      el-col(v-for="(parent, index) in parentColLengths" :span="24 / parentColLengths" :key="index")
        .grid-content.bg-purple-light
          el-row
            el-col(v-for="(child, index) in childColLengths" :span="24 / childColLengths" :key="index")
              .grid-content.bg-purple-light 
                  .grid_head 
                    strong {{colsContent[index].title}}
                  .grid_body {{colsContent[index].data}}
    el-row(v-else)
      el-row.row-bg
        .col_head_title
          strong {{titles}}
        el-col(v-for="(child, index) in childColLengths" :span="24 / childColLengths" :key="index")
          .grid-content
              .grid_head 
                |{{colsContent[index].title}} 
                strong.font30 {{colsContent[index].data}}

</template>

<script>
  export default {
    props: {
      isCol: {
        type: Boolean,
        default: true
      },
      title: {
        type: String,
        default: ''
      },
      parentColLength: {
        type: Number,
        default: 1
      },
      childColLength: {
        type: Number,
        default: 1
      },
      content: {
        type: Array,
        default: function () {
          return [{
            title: '',
            data: ''
          }]
        }
      }
    },
    data () {
      return {
        parentColLengths: this.parentColLength,
        childColLengths: this.childColLength,
        colsContent: this.content,
        isCols: this.isCol,
        titles: this.title
      }
    }
  }
</script>

<style lang="scss" scoped>
  .grid_box {
    line-height: 1.5;
    .el-row {
      margin-bottom: 20px;
      padding: 5px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
      text-align: center;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
    .col_head_title {
      padding: 10px;
    }
    .grid_body {
      font-size: 20px;
    }
    .font30 {
      font-size: 30px;
    }
  }
</style>

